<!--  RS485 配置  -->
<div class="card">
    <h2><span class="menu__icon">🔄</span> RS485 配置</h2>
    <form id="rs485-form">
        <div class="form-group">
            <label for="rs485-baudrate-select">波特率设定</label>
            <div class="baudrate-input-group">
                <!-- 下拉选择框 -->
                <select id="rs485-baudrate-select" name="baudrate_select" class="form-control">
                    <option value="4800">4800</option>
                    <option value="9600" selected>9600</option>
                    <option value="19200">19200</option>
                    <option value="38400">38400</option>
                    <option value="57600">57600</option>
                    <option value="115200">115200</option>
                    <option value="custom">自定义...</option> <!-- 新增自定义选项 -->
                </select>
                
                <!-- 自定义波特率输入框 (默认隐藏) -->
                <input type="number" id="rs485-baudrate-custom" name="baudrate_custom" class="form-control" placeholder="输入自定义波特率" style="display: none;">
            </div>
        </div>
        <!-- 可以添加数据位、停止位、校验位等配置 -->
        <button type="submit" class="btn">保存 RS485 设置</button>
    </form>
</div>

<!-- TCP Server 配置卡片 -->
<div class="card" id="tcp-server-card">
    <h2><span class="menu__icon">📥</span> TCP Server</h2>
    <form id="tcp-server-form">
        <!-- 启用开关 -->
        <div class="form-group service-toggle">
            <label for="tcp-server-enable">启用 TCP Server</label>
            <label class="switch">
                <input type="checkbox" id="tcp-server-enable" name="enabled">
                <span class="slider round"></span>
            </label>
        </div>

        <!-- 配置项 (默认隐藏) -->
        <div class="service-config-fields">
            <div class="form-group">
                <label for="tcp-server-port">监听端口</label>
                <input type="number" id="tcp-server-port" name="port" value="8888" min="1" max="65535" required>
            </div>
            <!-- 可以添加更多TCP Server特有的配置，例如最大连接数 -->
            <div class="form-group">
                <label for="tcp-server-max-clients">最大客户端连接数</label>
                <input type="number" id="tcp-server-max-clients" name="max_clients" value="4" min="1" max="10">
            </div>
        </div>
        
        <button type="submit" class="btn">保存 TCP Server 配置</button>
    </form>
</div>

<!-- TCP Client 配置卡片 -->
<div class="card" id="tcp-client-card">
    <h2><span class="menu__icon">📤</span> TCP Client</h2>
    <form id="tcp-client-form">
        <!-- 启用开关 -->
        <div class="form-group service-toggle">
            <label for="tcp-client-enable">启用 TCP Client</label>
            <label class="switch">
                <input type="checkbox" id="tcp-client-enable" name="enabled">
                <span class="slider round"></span>
            </label>
        </div>

        <!-- 配置项 (默认隐藏) -->
        <div class="service-config-fields">
            <div class="form-group">
                <label for="tcp-client-host">目标服务器 IP 或域名</label>
                <input type="text" id="tcp-client-host" name="host" placeholder="e.g., test.mosquitto.org" required>
            </div>
            <div class="form-group">
                <label for="tcp-client-port">目标服务器端口</label>
                <input type="number" id="tcp-client-port" name="port" value="1883" min="1" max="65535" required>
            </div>
        </div>
        
        <button type="submit" class="btn">保存 TCP Client 配置</button>
    </form>
</div>

<!-- UDP Server 配置卡片 -->
<div class="card" id="udp-server-card">
    <h2><span class="menu__icon">📡</span> UDP Server</h2>
    <form id="udp-server-form">
        <!-- 启用开关 -->
        <div class="form-group service-toggle">
            <label for="udp-server-enable">启用 UDP Server</label>
            <label class="switch">
                <input type="checkbox" id="udp-server-enable" name="enabled">
                <span class="slider round"></span>
            </label>
        </div>

        <!-- 配置项 (默认隐藏) -->
        <div class="service-config-fields">
            <div class="form-group">
                <label for="udp-server-port">监听端口</label>
                <input type="number" id="udp-server-port" name="port" value="9999" min="1" max="65535" required>
            </div>
        </div>
        
        <button type="submit" class="btn">保存 UDP Server 配置</button>
    </form>
</div>

<!-- UDP Client 配置卡片 -->
<div class="card" id="udp-client-card">
    <h2><span class="menu__icon">🛰️</span> UDP Client</h2>
    <form id="udp-client-form">
        <!-- 启用开关 -->
        <div class="form-group service-toggle">
            <label for="udp-client-enable">启用 UDP Client</label>
            <label class="switch">
                <input type="checkbox" id="udp-client-enable" name="enabled">
                <span class="slider round"></span>
            </label>
        </div>

        <!-- 配置项 (默认隐藏) -->
        <div class="service-config-fields">
            <div class="form-group">
                <label for="udp-client-host">目标服务器 IP 或域名</label>
                <input type="text" id="udp-client-host" name="host" placeholder="e.g., pool.ntp.org" required>
            </div>
            <div class="form-group">
                <label for="udp-client-port">目标服务器端口</label>
                <input type="number" id="udp-client-port" name="port" value="123" min="1" max="65535" required>
            </div>
        </div>
        
        <button type="submit" class="btn">保存 UDP Client 配置</button>
    </form>
</div>